<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    
    th, td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>

</head>
<body>

<input type="button" value="获取数据" id="j_btnGetData" />
<table>
  <thead>
  <tr>
    <th>标题</th>
    <th>地址</th>
    <th>说明</th>
  </tr>
  </thead>
  <tbody id="j_tbData">
  
  </tbody>
</table>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>

  // 模拟从后台拿到的数据
  var data = [{
    name: "传智播客",
    url: "http://www.itcast.cn",
    type: "IT最强培训机构"
  }, {
    name: "黑马程序员",
    url: "http://www.itheima.com",
    type: "大学生IT培训机构"
  }, {
    name: "传智前端学院",
    url: "http://web.itcast.cn",
    type: "前端的黄埔军校"
  }];
  
  
  $(function () {
    //获取添加按钮并注册点击事件
    $("#j_btnGetData").click(function () {
      //循环生成表格的获取到的数据的行数
      for(var i = 0; i < data.length; i++) {
        //因为$("<tr></tr>")后面会用到，直接先定义一个变量来存储着
        var tr = $("<tr></tr>");
        //循环给每行表格添加数据
        for (var key in data[i]){
          //因为$("<td></td>")后面会用到，直接先定义一个变量来存储着
          var td = $("<td></td>");
          //给每个td添加内容
          td.html(data[i][key]);
          //添加完内容后追加到结构中
          td.appendTo(tr);
        }
        //每次创建好一行，都把这一行追加到结构中
        //append和appendTo的不一样写法
//        $("#j_tbData").append(tr);
        tr.appendTo($("#j_tbData"));
      }
    });
  });
  
</script>